<template>
    <div>
        <h1>欢迎使用Vue 3</h1>
        <NewTable :tableHead="tableHead" :tableData="tableData" @clickFirst="onLook">
            <template #buttons>
                <el-table-column align="center" fixed="right" label="操作" width="250">
                    <template #default="{ row }">
                        <div>
                            <el-popover placement="top" width="100" trigger="hover">
                                <div>
                                    <div>
                                        <p>确定更新任务状态嘛？</p>
                                    </div>
                                    <div style="text-align: right; margin-top: 16px">
                                        <el-button size="small">取消</el-button>
                                        <el-button size="small">确认</el-button>
                                    </div>
                                </div>
                                <template #reference>
                                    <el-button>更新</el-button>
                                </template>
                            </el-popover>
                            <el-popover placement="top" width="100" trigger="hover">
                                <template #reference>
                                    <el-button>更新</el-button>
                                </template>
                            </el-popover>
                        </div>
                    </template>
                </el-table-column>
            </template>
        </NewTable>
    </div>


    <div>
        <div style="display: flex; align-items: center; gap: 10px;"><input v-model="inputText" placeholder="请输入内容">
            <p style="margin: 0;">可以输入的值为noSigned, noModified, noReviewed和其他</p><button @click="printNumber">函数</button>
        </div>
        <!-- 根据inputText动态变化表头的表格 -->
        <div style="margin-top: 20px;">
            <h3>动态表头表格 (当前类型: {{ inputText }})</h3>
            <el-table :data="dynamicTableData" style="width: 100%">
                <el-table-column v-for="(column, index) in dynamicHeaders" :key="index" :prop="column.prop"
                    :label="column.label" width="200"></el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import NewTable from './components/table.vue';

const onLook = (row) => {
    console.log(row.name, '父组件的点击事件');
};

const inputText = ref('noSigned');

// 计算属性，根据inputText动态生成表头
const dynamicHeaders = computed(() => {
    return createTableHeaders(inputText.value);
});

// 模拟数据，包含所有可能的字段
const dynamicTableData = ref([
    {
        orderDate: '2024-07-01',
        expectInstallDate: '2024-07-15',
        rejectDate: '2024-07-05',
        signDate: '2024-07-10',
        expectInstallTime: '2024-07-15 14:00',
    },
    {
        orderDate: '2024-07-02',
        expectInstallDate: '2024-07-16',
        rejectDate: '2024-07-06',
        signDate: '2024-07-11',
        expectInstallTime: '2024-07-16 10:00',
    },
    {
        orderDate: '2024-07-03',
        expectInstallDate: '2024-07-17',
        rejectDate: '2024-07-07',
        signDate: '2024-07-12',
        expectInstallTime: '2024-07-17 16:00',
    },
]);

function createTableHeaders(type) {
    let baseHeaders = [
        ...(type === 'noSigned'
            ? [
                { prop: 'orderDate', label: '下单日期' },
                { prop: 'expectInstallDate', label: '期望安装日期' },
            ]
            : type === 'noModified'
                ? [
                    { prop: 'rejectDate', label: '驳回日期' },
                    { prop: 'expectInstallDate', label: '期望安装日期' },
                ]
                : type === 'noReviewed'
                    ? [{ prop: 'signDate', label: '签署日期' }]
                    : [{ prop: 'expectInstallTime', label: '期望安装时间' }]),
    ];

    return baseHeaders;
}



const tableHead = [
    {
        prop: 'name',
        label: '姓名',
        width: '180',
    },
    {
        prop: 'age',
        label: '年龄',
        width: '180',
    },
    {
        prop: 'address',
        label: '地址',
        width: '300',
    },
    {
        prop: 'time',
        label: '时间',
        width: '300',
    },
];

const tableData = [
    {
        name: '张三',
        age: 18,
        address: '北京市海淀区',
        time: '2020-01-01',
    },
    {
        name: '李四',
        age: 20,
        address: '河北省廊坊市',
        time: '2020-01-02',
    },
    {
        name: '王五',
        age: 25,
        address: '上海市浦东新区',
        time: '2020-01-03',
    },
    {
        name: '赵六',
        age: 30,
        address: '广东省深圳市南山区',
        time: '2020-01-04',
    },
    {
        name: '孙七',
        age: 22,
        address: '四川省成都市锦江区',
        time: '2020-01-05',
    },
    {
        name: '周八',
        age: 28,
        address: '浙江省杭州市西湖区',
        time: '2020-01-06',
    },
    {
        name: '吴九',
        age: 35,
        address: '江苏省南京市玄武区',
        time: '2020-01-07',
    },
    {
        name: '郑十',
        age: 26,
        address: '湖北省武汉市洪山区',
        time: '2020-01-08',
    },
    {
        name: '钱十一',
        age: 24,
        address: '陕西省西安市雁塔区',
        time: '2020-01-09',
    },
    {
        name: '孙十二',
        age: 29,
        address: '山东省青岛市市南区',
        time: '2020-01-10',
    },
];
</script>

<style scoped>
/* 这里可以编写组件样式 */
</style>
